{% extends "base.html" %} {% block style %}
<style></style>
{% endblock %} {% block content %}

<table class="table table-hover" >
  <thead>
    <tr>
      <th>ID</th>
      <th>文件名</th>
      <th>路径</th>
      <th style="min-width:120px">资源URL</th>
      <th style="min-width:200px">创建时间</th>
      {% comment %} <th>更新时间</th> {% endcomment %}
      <th style="min-width:100px">创建用户</th>
      <th style="min-width:200px">操作</th>
    </tr>
  </thead>
  <tbody>
    {% if not instances %}
    <tr>
      <td colspan="6" style="text-align:center">暂无数据</td>
    </tr>
    {% else %}
    {% for instance in instances %}
    <tr>
      <td scope="row">{{forloop.counter}}</td>
      <td>{{instance.file_name}}</td>

      <td>
        <a href="{{instance.full_url}}" target="_blank"
          >{{instance.full_url}}</a
        >
      </td>
      <td>
        {% if instance.source_url %}
        <a href="{{instance.source_url}}" target="_blank"
          >查看原始链接</a
        >
        {% endif %}
        
        <//a>
          </a>
      </td>
      <td>{{instance.created_at|date:"Y-m-d h:m:s" }}</td>
      {% comment %} <td>{{instance.updated_at|date:"Y-m-d h:m:s" }}</td> {% endcomment %}
      <td>
        {%  if instance.created_by.first_name %}
        {{instance.created_by.first_name}}
        {% else %}
        {{instance.created_by}}
        {% endif %}
      </td>
      <td>
        {% comment %} 删除 {% endcomment %}
        <a
          href="#"
          data-id = "{{instance.id}}"
          data-file-name = "{{instance.file_name}}"
          data-source-url = "{{instance.source_url}}"
          class="btn btn-primary btn-sm edit_btn"
          >编辑
        </a>
        <a
          href="#"
          data-id = {{instance.id}}
          class="btn btn-danger btn-sm delete_btn"
          >删除
        </a>
      </td>
    </tr>
    {% endfor %} {% endif %}
  </tbody>
</table>

<script>
  $(document).ready(function () {
    $(".delete_btn").click(function () {
      let id = $(this).attr("data-id");
      createDialog('删除', "<p>确认执行删除操作吗</p>", function() {
        // 确认按钮的回调逻辑
        window.location.href = "/delete_static_file/" + id 
        console.log('Record deleted',id);
      });
    })
    $(".edit_btn").click(function () {
      let id = $(this).attr("data-id");
      let file_name = $(this).attr("data-file-name");
      let source_url = $(this).attr("data-source-url");
      let form = `
        <form action="/edit_static_file" method="post" id="edit_static_file_form">
          {%csrf_token%}
          <input type="hidden" name="id" value="${id}">
          </input>
          <div class="form-group">
            <label for="file_name">文件名</label>
            <input type="text" class="form-control" id="file_name" name="file_name" placeholder="文件名" value="${file_name}"">
          </div>
          <div class="form-group">
            <label for="source_url">原始链接</label>
            <input type="text" class="form-control" id="source_url" name="source_url" placeholder="文件路径" value="${source_url}"">
          </div>
        </form>
      `
      createDialog('编辑', form, function() {
        // 确认按钮的回调逻辑
        $("#edit_static_file_form").submit()
        console.log('Record edited',id);
      });
    })
  });
</script>
{% endblock %}
